﻿<script setup lang="ts" name="MarkdownEditor">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const markDownRef = ref(null)
const value = ref(`
  # 标题h1

  ##### 标题h5

  **加粗**
  *斜体*
  ~~删除线~~
  [链接](https://gitee.com/ctokevin/vue-admin-system)
  ↓分割线↓

  ---

  * 无序列表1
    * 无序列表1.1

  1. 有序列表1
  2. 有序列表2

  * [ ] 任务列表1
  * [x] 任务列表2

  > 引用示例

  \`\`\`js
  // 代码块:
  (() => {
    var htmlRoot = document.getElementById('htmlRoot');
    var theme = window.localStorage.getItem('__APP__DARK__MODE__');
    if (htmlRoot && theme) {
      htmlRoot.setAttribute('data-theme', theme);
      theme = htmlRoot = null;
    }
  })();
  \`\`\`

  | 表格 | 示例 | 🎉️ |
  | --- | --- | --- |
  | 1 | 2 | 3 |
  | 4 | 5 | 6 |
`)
const handleChange = (v: string) => {
  value.value = v
}
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <Markdown v-model:value="value" @change="handleChange" ref="markDownRef" placeholder="这是占位文本" width="100%" />
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>Markdown展现视图演示</span>
          </div>
        </template>
        <MarkdownViewer :value="value" />
      </el-card>
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-card {
  display: flex;
  flex-direction: column;
  overflow: inherit;

  :deep(.el-card__header) {
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

    }
  }

  :deep(.el-card__body) {
    flex: 1;
  }

  .el-card {
    margin-top: var(--el-space);
  }
}
</style>
